<template>
  <div>
    <div id="mountNode"></div>
  </div>
</template>

<script setup lang="ts">
import G6 from '@antv/g6';
import { onMounted } from 'vue';

// 定义数据源
const data = {
  // 点集
  nodes: [
    {
      id: 'node1',
      type: 'topo-node',
    },
    {
      id: 'node2',
      type: 'topo-node',
    },
  ],
  // 边集
  edges: [
    // 表示一条从 node1 节点连接到 node2 节点的边
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

// 注册自定义节点
G6.registerNode('topo-node', {
  draw(cfg, group) {
    const shape = group.addShape('image', {
      name: 'topo-node',
      draggeble: true,
      attrs: {
        img: 'src/assets/images/topology/CUBE.png',
        width: 70,
        height: 70,
        opacity: 0.8,
      },
    });
    return shape;
  },
});

const lineDash = [4, 2, 1, 2];

G6.registerEdge(
  'line-dash',
  {
    afterDraw(cfg, group) {
      // get the first shape in the group, it is the edge's path here=
      const shape = group.get('children')[0];
      let index = 0;
      // Define the animation
      shape.animate(
        () => {
          index++;
          if (index > 9) {
            index = 0;
          }
          const res = {
            lineDash,
            lineDashOffset: -index,
          };
          // returns the modified configurations here, lineDash and lineDashOffset here
          return res;
        },
        {
          repeat: true, // whether executes the animation repeatly
          duration: 3000, // the duration for executing once
        }
      );
    },
  },
  'quadratic' // extend the built-in edge 'cubic'
);

const nodeClickEvent = (evt) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const item = evt.item;
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const tartget = evt.target;
};

onMounted(() => {
  // 创建 G6 图实例
  const graph = new G6.Graph({
    container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
    // 画布宽高
    fitCenter: true,
    width: 1700,
    height: 600,
    fitView: true, // 是否开启画布自适应。开启后图自动适配画布大小。
    fitViewPadding: 100, // 画布的padding值
    layout: {
      type: 'random',
      // nodeSize: 10,
    },
    modes: {
      default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点、设置高亮
    },
    defaultEdge: {
      type: 'line-dash',
      style: {
        lineWidth: 2,
        stroke: '#bae7ff',
      },
    },
  });

  // 读取数据
  graph.data(data);

  // 绑定事件
  graph.on('node:click', nodeClickEvent);

  // 渲染图
  graph.render();
});
</script>
